<template>
    <div class="goodspoints">
        <div class="content">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品分类</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button type="success" plain  class="add">添加分类</el-button>
            <!-- 表格 -->
            <el-table :data="tableData" row-key="cat_id" :tree-props="{children: 'children'}" height="400" style="width: 100%;">
                <el-table-column label="分类名称" prop="cat_name" width="350px"></el-table-column>
                <el-table-column label="级别" prop="cat_level" width="180px">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cat_level == 0">一级</span>
                        <span v-else-if="scope.row.cat_level == 1">二级</span>
                        <span v-else>三级</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否有效">有效</el-table-column>
                <el-table-column label="操作" prop="desc">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row.cat_name,scope.row.cat_id)"></el-button> 
                        <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row.cat_id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="num"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { datalist } from "../api/api.js"
  export default {
    data() {
      return {
        tableData: [],
        tableData2: [],
        total: 0,
        currentPage4: 0,
        num: 5
      };
    },
    created() {
      this.datalist()
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.num = val;
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
      },
      datalist() {
        datalist({
          type: 3
        }).then(res => {
          if (res.status == 200) {
            this.options = res.data.data;
            console.log("数据列表", res);
            this.tableData = res.data.data;
            console.log(this.tableData.length);
            this.total = this.tableData.length;
          }
        });
      },
    }
  };
</script>

<style scoped lang="scss">
    .goodspoints{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        .content{
            width:97%;
            height:95%;
            .add{
               margin-top:10px; 
            }
            .demo-table-expand {
                font-size: 0;
            }
            .demo-table-expand label {
                width: 90px;
                color: #99a9bf;
            }
            .demo-table-expand .el-form-item {
                margin-right: 0;
                margin-bottom: 0;
                width: 50%;
            }
        }
    }
</style>
